<template>
  <div class="statistics-view">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="算法评估" name="evaluation">
        <algorithm-comparison />
      </el-tab-pane>
      <el-tab-pane label="体积分析" name="volume">
        <div class="volume-analysis">
          <div class="chart" ref="volumeChartRef"></div>
          <div class="metrics">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="总体积">{{ volumeData.total }} ml</el-descriptions-item>
              <el-descriptions-item label="平均密度">{{ volumeData.avgDensity }} HU</el-descriptions-item>
              <el-descriptions-item label="最大直径">{{ volumeData.maxDiameter }} mm</el-descriptions-item>
              <el-descriptions-item label="表面积">{{ volumeData.surfaceArea }} mm²</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="密度分布" name="density">
        <div class="density-analysis">
          <div class="chart" ref="densityChartRef"></div>
          <div class="metrics">
            <el-table :data="densityData" border style="width: 100%">
              <el-table-column prop="range" label="密度范围 (HU)" />
              <el-table-column prop="percentage" label="占比 (%)" />
              <el-table-column prop="volume" label="体积 (ml)" />
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import AlgorithmComparison from './AlgorithmComparison.vue'

const activeTab = ref('evaluation')
const volumeChartRef = ref<HTMLElement>()
const densityChartRef = ref<HTMLElement>()

// 模拟体积数据
const volumeData = {
  total: 245.6,
  avgDensity: -850,
  maxDiameter: 68.5,
  surfaceArea: 1256.8
}

// 模拟密度分布数据
const densityData = [
  { range: '< -950', percentage: 15.2, volume: 37.3 },
  { range: '-950 ~ -900', percentage: 25.8, volume: 63.4 },
  { range: '-900 ~ -850', percentage: 35.5, volume: 87.2 },
  { range: '-850 ~ -800', percentage: 18.3, volume: 44.9 },
  { range: '> -800', percentage: 5.2, volume: 12.8 }
]

const initVolumeChart = () => {
  if (!volumeChartRef.value) return
  
  const chart = echarts.init(volumeChartRef.value)
  const option = {
    title: {
      text: '体积变化趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['切片1', '切片2', '切片3', '切片4', '切片5', '切片6']
    },
    yAxis: {
      type: 'value',
      name: '体积 (ml)'
    },
    series: [{
      data: [35, 48, 62, 58, 43, 30],
      type: 'line',
      smooth: true,
      areaStyle: {}
    }]
  }
  
  chart.setOption(option)
}

const initDensityChart = () => {
  if (!densityChartRef.value) return
  
  const chart = echarts.init(densityChartRef.value)
  const option = {
    title: {
      text: '密度分布直方图',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: densityData.map(item => item.range)
    },
    yAxis: {
      type: 'value',
      name: '占比 (%)'
    },
    series: [{
      data: densityData.map(item => item.percentage),
      type: 'bar',
      barWidth: '60%'
    }]
  }
  
  chart.setOption(option)
}

onMounted(() => {
  initVolumeChart()
  initDensityChart()
  
  window.addEventListener('resize', () => {
    const volumeChart = echarts.getInstanceByDom(volumeChartRef.value!)
    const densityChart = echarts.getInstanceByDom(densityChartRef.value!)
    volumeChart?.resize()
    densityChart?.resize()
  })
})
</script>

<style scoped>
.statistics-view {
  padding: 20px;
}

.volume-analysis,
.density-analysis {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart {
  height: 400px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.metrics {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style> 